<template>
  <div class="oe-category-management" v-loading="loading">
    <top-tip :title="title" :showBack="false"></top-tip>
    <div class="oe-category-content__search">
      <a-row>
        <a-col :span="8">
          <span class="oe-manage-text">批次名称：</span>
          <span style="width: 80%; display: inline-block">
            <a-input v-model="batchName" placeholder="输入批次名称" @keyup.13="getCaList"></a-input>
          </span>
        </a-col>
        <a-col :span="8">
          <span class="oe-search-label">&nbsp;&nbsp;&nbsp; 分类名称：</span>
          <span style="width: 80%; display: inline-block">
            <a-input v-model="sortName" placeholder="输入分类名称" @keyup.13="getCaList"></a-input>
          </span>
        </a-col>
        <a-col :span="8">
          <span class="oe-search-label">&nbsp;&nbsp;&nbsp; 考试名称：</span>
          <span style="width: 80%; display: inline-block">  
            <a-input v-model="examName" placeholder="输入考试名称" @keyup.13="getCaList"></a-input>
          </span>
        </a-col>
        <a-col :span="8" style="margin-top: 20px">
          <span class="oe-search-label">&nbsp;&nbsp;&nbsp;开始时间：</span>
          <span>
            <a-date-picker
              style="width: 80%"
              :disabledDate="disabledStartDate"
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              v-model="startValue"
              placeholder="请输入开始时间"
              @openChange="handleStartOpenChange"
              :allowClear="true"
            />
          </span>
        </a-col>
        <a-col :span="8" style="margin-top: 20px">
          <span class="oe-search-label">&nbsp;&nbsp;&nbsp;结束时间：</span>
          <span>
            <a-date-picker
              style="width: 80%"
              :disabledDate="disabledEndDate"
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="请输入结束时间"
              v-model="endValue"
              :open="endOpen"
              @openChange="handleEndOpenChange"
              :allowClear="true"
            />
          </span>
        </a-col>
        <a-col :span="4" style="margin-top: 20px">
          <span class="oe-search-label">&nbsp;&nbsp;&nbsp;考试类别：</span>
          <span>
            <a-select v-model="examType" style="width: 50%">
              <a-select-option value="0">正式考</a-select-option>
              <a-select-option value="1">补考</a-select-option>
            </a-select>
          </span>
        </a-col>
        <a-col :span="4" style="margin-top: 20px">
          <a-button type="primary" @click="getSerch">查询</a-button>
          <a-button type="primary" v-if="operationList.includes('export')">
            <a :href="exportUrl">导出列表</a>
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="oe-category">
      <span class="oe-search-label">&nbsp;&nbsp;&nbsp; 总参考人次：</span>
      <span class="oe-search-input" style="width: 200px">
        <b style="color: red">{{ allStuCount }}</b
        >人次
      </span>
      <span class="oe-search-label">总进行中人次：</span>
      <span class="oe-search-input" style="width: 200px">
        <b style="color: red">{{ nowStu }}</b
        >人次
      </span>
      <span class="oe-search-label">总已交卷人次：</span>
      <span class="oe-search-input" style="width: 200px">
        <b style="color: red">{{ finStu }}</b
        >人次
      </span>
      <span class="oe-search-label">缺考人次：</span>
      <span class="oe-search-input" style="width: 200px">
        <b style="color: red">{{ noStuCount }}</b
        >人次
      </span>
    </div>
    <div class="oe-category-content">
      <div class="oe-category-content__table">
        <a-table :columns="columns" :dataSource="dataList" @change="onTableChange" :pagination="pagination"></a-table>
      </div>
    </div>
  </div>
</template>

<script>
//import oeUpload from '@/components/oe-upload/index.vue';
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'examRoomMangement',
  components: {
    topTip,
  },
  mixins: [GetOperationList],
  data() {
    return {
      // 分页配置
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0,
      },
      // 表标题
      columns: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '5%',
          key: 'number',
        },
        {
          title: '批次名称',
          dataIndex: 'BatchName',
          width: '10%',
          key: 'BatchName',
          sorter: true,
        },
        {
          title: '考试名称',
          dataIndex: 'Title',
          width: '10%',
          key: 'Title',
          sorter: true,
        },
        {
          title: '分类名称',
          dataIndex: 'SortNodeName',
          width: '13%',
          key: 'SortNodeName',
          sorter: true,
        },
        {
          title: '创建人',
          dataIndex: 'DisplayName',
          width: '8%',
          key: 'DisplayName',
          sorter: true,
        },
        {
          title: '用户名',
          dataIndex: 'UserName',
          width: '8%',
          key: 'UserName',
          sorter: true,
        },
        {
          title: '开始时间',
          dataIndex: 'StartTime',
          width: '11%',
          key: 'StartTime',
          sorter: true,
        },
        {
          title: '结束时间',
          dataIndex: 'EndTime',
          width: '11%',
          key: 'EndTime',
          sorter: true,
        },
        {
          title: '参考人数',
          dataIndex: 'AllStuCont',
          width: '6%',
          key: 'AllStuCont',
        },
        {
          title: '进行中人数',
          dataIndex: 'NowStuCount',
          width: '6%',
          key: 'NowStuCount',
        },
        {
          title: '已交卷人数',
          dataIndex: 'FinStuCount',
          width: '6%',
          key: 'FinStuCount',
        },
        {
          title: '缺考人数',
          dataIndex: 'NoStuCount',
          width: '6%',
          key: 'NoStuCount',
        },
      ],
      // 数据列表
      dataList: [],
      loading: false,
      // 搜索分类名称
      examName: '',
      batchName: '',
      sortName: '',
      examType: '正式考',
      // 开始时间
      startValue: null,
      // 结束时间
      endValue: null,
      endOpen: false,
      allStuCount: 0,
      nowStu: 0,
      finStu: 0,
      noStuCount: 0,
      operationList: [],
      exportUrl: '',
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getOperation();
    });
  },
  methods: {
    // 获取页面操作
    getOperation() {
      this.loading = true;
      this.GetOperationList().then((rst) => {
        this.loading = false;
        this.operationList = [];
        this.IsOpList = [];
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              if (item.IsWrite) {
                this.operationList.push(item.Name);
              }
              this.IsOpList = rst.list;
            });
          }
          this.getCaList();
          this.getHeadInfo();
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    // 点击table排序
    onTableChange(pagenation, filter, sort) {
      let sortOrder = '';
      if (sort.order) {
        if (sort.order == 'ascend') {
          sortOrder = sort.columnKey;
        } else if (sort.order == 'descend') {
          sortOrder = '-' + sort.columnKey;
        } else {
          sortOrder = '';
        }
      }
      this.getCaList(pagenation.current, pagenation.pageSize, sortOrder);
    },
    getHeadInfo() {
      this.$http
        .post('/api/examStatistics/todayExam/getInfo', {
          examName: this.examName,
          examType: this.examType == 1 ? 1 : 0,
          batchName: this.batchName,
          sortName: this.sortName,
          startTime: this.$moment(this.startValue).format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.$moment(this.endValue).format('YYYY-MM-DD HH:mm:ss'),
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.allStuCount = rst.allStuCount;
            this.nowStu = rst.nowStu;
            this.finStu = rst.finStu;
            this.noStuCount = rst.noStuCount;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    getSerch() {
      this.getCaList();
      this.getHeadInfo();
    },
    // 获取分类列表
    getCaList(current, pageSize, sort) {
      var examtype = this.examType == 1 ? 1 : 0;
      this.exportUrl =
        '/api/examStatistics/todayExam/getList?export=1&examName=' +
        this.examName +
        '&examType=' +
        examtype +
        '&batchName=' +
        this.batchName +
        '&sortName=' +
        this.sortName +
        '&startTime=' +
        this.$moment(this.startValue).format('YYYY-MM-DD HH:mm:ss') +
        '&endTime=' +
        this.$moment(this.endValue).format('YYYY-MM-DD HH:mm:ss');
      console.log(this.exportUrl);
      this.loading = true;
      this.$http
        .post('/api/examStatistics/todayExam/getList', {
          examName: this.examName,
          examType: this.examType == 1 ? 1 : 0,
          batchName: this.batchName,
          sortName: this.sortName,
          page: current || 1,
          pageSize: pageSize || 10,
          sort: sort || '',
          startTime: this.$moment(this.startValue).format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.$moment(this.endValue).format('YYYY-MM-DD HH:mm:ss'),
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.dataList = [];
            this.startValue = this.$moment(rst.startTime);
            this.endValue = this.$moment(rst.endTime);
            this.pagination.current = rst.pagination.pageIndex;
            this.pagination.pageSize = rst.pagination.pageSize;
            this.pagination.total = rst.pagination.totalCount;
            if (rst.list && rst.list.length) {
              rst.list.forEach((item, index) => {
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                this.dataList.push({
                  number,
                  ...item,
                });
              });
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
  },
};
</script>
